<template>
    <el-dialog
            v-model="dialog.visible"
            :before-close="closeDialog"
    >
        <el-tabs v-model="dialog.active" class="demo-tabs" @tab-click="onTabClick">
            <el-tab-pane label="基本设置" name="basic">
                <Basic
                        :modelId="dialog.model.id"
                        :dbmsId="dbmsId"
                        v-if="dialog.model.id && dialog.active==='basic'"
                        :ref="(el) => doSetFromMap(el, 'basic')"
                ></Basic>
            </el-tab-pane>
            <el-tab-pane label="字段集合" name="column">
                <Column_
                        :model="dialog.model"
                        :dbmsId="dbmsId"
                        v-if="dialog.model.id && dialog.active==='column'"
                        :ref="(el) => doSetFromMap(el, 'column')"
                ></Column_>
            </el-tab-pane>
            <el-tab-pane label="验证器设置" name="validator">validator</el-tab-pane>
            <el-tab-pane label="索引设置" name="index">index</el-tab-pane>
        </el-tabs>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog.visible = false">取消</el-button>
                <el-button type="primary" @click="doSubmit">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup type="ts">
import '@/assets/app.css'
import {reactive, ref} from "vue";
import Basic from "@/views/pages/design/domain/forms/basic.vue";
import Column_ from "@/views/pages/design/domain/forms/column.vue"

const fromRefMap = ref({});

const props = defineProps({
    dbmsId: {}
});

const dialog = reactive({
    visible: false,
    title: '创建数据源',
    model: {},
    active: 'basic'
})

const doSetFromMap = (el, env) => {
    if (el) {
        fromRefMap.value[`From_Ref_${env}`] = el;
    }
}

const openDialog = (row) => {
    dialog.visible = true;
    dialog.model = row;
}

const closeDialog = () => {
    dialog.visible = false;
    dialog.model = {};
}

const doSubmit = () => {
    fromRefMap.value[`From_Ref_${dialog.active}`].doSubmit();
}

const onTabClick = () => {

}
const exposed = {
    openDialog
};
defineExpose(exposed);
</script>
